<template>
    <div class="main">
        <div class="header" @click="centerDialogVisible=true">
            <div style="width: 100%; height: 100%;">
                <img src="../../public/mimages/xiaomibuds401.png" alt="" width="100%" height="100%">
            </div>  
        </div>
        <div class="center" @click="centerDialogVisible=true">
            <div style="width: 100%; height: 100%;">
                <div style="position: relative; top:150px; left:950px; height: 30px; ">
                    <p>半入耳舒适降噪</p>
                    <p>舒适与静谧兼得</p>
                    <p>HiFi音质，静享天籁之音</p>
                    <p>独立空间音频</p>
                    <p>跨设备自由感受立体听感</p>
                </div>
                <img src="../../public/mimages/xiaomibuds402.png" alt="" width="100%" height="100%">
            </div>  
        </div>
        <div class="body">
            <div class="card1">
                <p class="p1">半入耳舒适降噪</p>
                <p class="p2">精巧设计</p>
                <p class="p2">人体工学</p>
                <p class="p2">智能主动降噪</p>
                <p class="p2">平衡耳压</p>
            </div>
            <div class="card2">
                <p class="p1">独立空间音频</p>
                <p class="p2">声随头动</p>
                <p class="p2">优质影视平台合作</p>
            </div>
            <div class="card3">
                <p class="p3">小米妙享</p>
                <p class="p3">互联互通</p>
            </div>
            <div class="card4">
                <p class="p3">3Mic+AI 通话降噪</p>
                <p class="p1">AI 通话抗风噪</p>
                <p class="p2">中国计量院测量</p>
                <p class="p2">可抗32.4km/h风噪</p>
            </div>
            <div class="card5">
                <p class="p3">6/30小时</p>
                <p class="p1">超长续航</p>
                <p class="p2">充电十分钟</p>
                <p class="p2">听歌2.5小时</p>
            </div>
            <div class="card6">
                <p class="p1">HiFi音质</p>
                <p class="p2">石墨烯双磁发声单元</p>
                <p class="p2">192kHz采样率，动态自适应EQ补偿</p>
            </div>
            <div class="card7">
                <p class="p3">IP54</p>
                <p class="p3">防尘防水</p>
            </div>
        </div>
        <div class="bottom" @click="httpupto(2)">
            <p>更多相关商品 
                <i class="el-icon-arrow-right">
                </i>
            </p>
        </div>
    </div>
</template>

<script>
import axios from 'axios';
export default{
 name: '',
 components: {},
 data(){
    return{
        commodityListvalue:{
            index:0,
            id:0
        },
    }
 },
 methods:{
    httpupto(ins){
        this.commodityListvalue.index = ins
        axios.patch('http://localhost:3001/mishowlistindex/0', this.commodityListvalue).then(()=>{
        this.$router.push('miphone')
                    })
  }
 }
};
</script>

<style scoped lang='less'>
.main{
    height: 1800px;
    width: 100%;
    background: linear-gradient(rgba(255,255,255,0.8),rgba(141, 172, 112, 0.8));
    .header{
    margin-left: 7%;
    width: 85%;
    height:500px;
    margin-bottom: 20px;
    }
    .center{    
    margin-left: 7%;
    width: 85%;
    height:500px;
    p{
        font-size: 25px;
        color: aliceblue;
        padding: 15px 0 15px 0;
    }
    }
    .body{
        width: 800px;
        height: 700px;
        background:url('../../public/mimages/xiaomibuds403.png') no-repeat;
        background-size:contain;
        background-position: center 0;
        position: relative;
        top: 70px;
        margin: auto;
        .card1{
            width: 2000px;
            height: 100px;
            position: relative;
            top: 80px;
            left: 150px;
            
        }
        .card2{
            position: relative;
            top: 220px;
            left: 106px;
        }
        .card3{
            position: relative;
            top: 158px;
            left: 298px;
        }
        .card4{
            position: relative;
            top: 80px;
            left: 550px;
        }
        .card5{
            position: relative;
            top: 128px;
            left: 453px;
        }
        .card6{
            position: relative;
            top: 183px;
            left: 100px;
        }
        .card7{
            position: relative;
            top: -43px;
            left: 613px;
        }
        .p1{
            font-size: 20px;
            font-weight: 600;
            margin-bottom: 15px;
            }
        .p2{
            font-size: 14px;
            margin-bottom: 6px;
            color: grey;
        }
        .p3{
            font-size: 20px;
            font-weight: 600; 
            margin-bottom: 6px;
        }
    }
    .bottom{
        width: 170px;
        height: 60px;
        position: relative;
        font-size: 20px;
        color: aliceblue;
        top: -280px;
        left: 1350px;
        background-color: rgba(255,255,255, 0);
    }
    .bottom :hover{
        color: darkgreen;
    }
}    
</style>